{% load static%}
<!DOCTYPE html>
<html lang="zh-CN">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <meta name="description"
    content="个性化健康饮食推荐系统，基于身体数据定制膳食方案，支持饮食记录、营养分析、食谱管理" />
  <meta name="keywords" content="健康饮食,个性化推荐,营养管理,饮食记录,食谱库" />
  <meta name="author" content="yxw,2058570743@qq.com" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
  <meta name="HandheldFriendly" content="true" />
  <meta name="MobileOptimized" content="320" />
  <meta name="apple-mobile-web-app-title" content="健康饮食推荐" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no,email=no" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="x5-orientation" content="portrait" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="x5-page-mode" content="app" />
  <link rel="apple-touch-icon-precomposed" href="{% static 'mobile/img/icon-57x57.png' %}" sizes="57x57" />
  <link rel="apple-touch-icon-precomposed" href="{% static 'mobile/img/icon-114x114.png' %}" sizes="114x114" />
  <link rel="apple-touch-icon-precomposed" href="{% static 'mobile/img/icon-144x144.png' %}" sizes="144x144" />
  <link rel="apple-touch-startup-image" href="{% static 'mobile/img/startup-768x1004.png' %}" sizes="768x1004" />
  <link rel="apple-touch-startup-image" href="{% static 'mobile/img/startup-1536x2008.png' %}" sizes="1536x2008" />
  <link rel="apple-touch-startup-image" href="{% static 'mobile/img/startup-1024x748.png' %}" sizes="1024x748" />
  <meta name="msapplication-TileColor" content="#0ABAB5" />
  <meta name="msapplication-TileImage" content="{% static 'mobile/img/icon-144x144.png' %}" />
  <link rel="shortcut icon" type="image/ico" href="{% static 'mobile/img/favicon.ico' %}" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://yourdomain.com" />
  <meta property="og:title" content="个性化健康饮食推荐系统" />
  <meta property="og:image" content="{% static 'mobile/img/share-cover.png' %}" />
  <meta property="og:description" content="基于身体数据的智能饮食管理工具，定制膳食方案，守护健康" />
  <title>个性化健康饮食推荐系统</title>
  
  <!-- 图标库 -->
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4085599_8k3c0t5k8s9.css" />
  <!-- 基础样式 -->
  <link rel="stylesheet" href="{% static 'mobile/css/normalize.css' %}" />
  <style>
    /* 1. 全局基础 - 健康自然风格 */
    :root {
      --color-primary: #0ABAB5; /* Tiffany蓝绿色（主色调） */
      --color-primary-light: #5CD0C5; /* 浅蓝绿色（交互反馈） */
      --color-bg: #f0f7f7; /* 浅蓝绿色底（替代全白，更协调） */
      --color-card: #ffffff; /* 卡片白（内容承载） */
      --color-text-main: #1f2937; /* 深灰（主文本） */
      --color-text-secondary: #6b7280; /* 中灰（次要文本） */
      --color-text-light: #d1d5db; /* 浅灰（辅助线/弱提示） */
      --radius: 10px; /* 统一圆角（自然柔和） */
      --shadow: 0 2px 10px rgba(0,0,0,0.04); /* 轻阴影（分层不刺眼） */
      --transition: all 0.3s ease; /* 统一过渡 */
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 14px;
      color: var(--color-text-main);
      background-color: var(--color-bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* 2. 顶部导航 - 简洁自然 */
    .top-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: var(--color-card);
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      z-index: 999;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 600;
      color: var(--color-primary);
    }

    .logo .iconfont {
      font-size: 20px;
    }

    .user-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      overflow: hidden;
      border: 2px solid var(--color-primary-light);
    }

    .user-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 3. 功能快捷栏 - 横向滚动+自然布局 */
    .function-bar {
      position: fixed;
      top: 50px;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: var(--color-card);
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      border-bottom: 1px solid var(--color-text-light);
      z-index: 998;
    }

    .function-bar::-webkit-scrollbar {
      display: none;
    }

    .function-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 60px;
      color: var(--color-text-secondary);
      transition: var(--transition);
      cursor: pointer;
    }

    .function-item.active,
    .function-item:hover {
      color: var(--color-primary);
    }

    .function-icon {
      font-size: 22px;
      margin-bottom: 4px;
    }

    .function-name {
      font-size: 11px;
      white-space: nowrap;
    }

    /* 4. 主内容区 - 自然留白+模块分明 */
    .content {
      margin-top: 110px; /* 顶部导航+功能栏高度 */
      padding: 0 18px 70px; /* 底部导航高度留白 */
    }

    /* 模块标题 - 自然强调 */
    .module-title {
      font-size: 17px;
      font-weight: 600;
      color: var(--color-text-main);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .module-title .iconfont {
      color: var(--color-primary);
    }

    /* 5. 核心模块样式 - 自然承载内容 */
    /* 今日推荐模块 */
    .today-recommend {
      margin-bottom: 24px;
    }

    .recommend-card {
      background-color: var(--color-card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 16px;
    }

    .recommend-header {
      padding: 14px 16px;
      border-bottom: 1px solid var(--color-text-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .meal-time {
      font-size: 15px;
      font-weight: 500;
      color: var(--color-text-main);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .meal-time .iconfont {
      color: var(--color-primary);
    }

    .nutri-tag {
      font-size: 11px;
      color: var(--color-primary);
      background-color: rgba(10, 186, 181, 0.1); /* Tiffany蓝透明背景 */
      padding: 2px 8px;
      border-radius: 12px;
    }

    .recommend-body {
      padding: 16px;
    }

    .meal-img {
      width: 100%;
      height: 160px;
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 12px;
    }

    .meal-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .meal-desc {
      color: var(--color-text-secondary);
      margin-bottom: 12px;
      line-height: 1.5;
    }

    .meal-nutri {
      display: flex;
      gap: 16px;
      color: var(--color-text-secondary);
      font-size: 12px;
    }

    .meal-nutri span {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .add-plan-btn {
      width: 100%;
      height: 38px;
      margin-top: 14px;
      background-color: var(--color-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: var(--transition);
    }

    .add-plan-btn:hover {
      background-color: var(--color-primary-light);
    }

    /* 饮食记录模块 */
    .diet-record {
      margin-bottom: 24px;
    }

    .record-card {
      background-color: var(--color-card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .record-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .form-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-label {
      font-size: 13px;
      color: var(--color-text-secondary);
      font-weight: 500;
    }

    .form-input {
      height: 40px;
      padding: 0 12px;
      border: 1px solid var(--color-text-light);
      border-radius: var(--radius);
      font-size: 14px;
      color: var(--color-text-main);
      transition: var(--transition);
    }

    .form-input:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px rgba(10, 186, 181, 0.1); /* Tiffany蓝焦点效果 */
    }

    .form-textarea {
      min-height: 80px;
      padding: 12px;
      resize: none;
    }

    /* 6. 底部导航 - 固定+自然交互 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 55px;
      background-color: var(--color-card);
      box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      justify-content: space-around;
      z-index: 999;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--color-text-secondary);
      text-decoration: none;
      transition: var(--transition);
    }

    .nav-item.active {
      color: var(--color-primary);
    }

    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }

    .nav-name {
      font-size: 11px;
    }

    /* 7. 模块切换 - 自然隐藏/显示 */
    .content-module {
      display: none;
      animation: fadeIn 0.5s ease;
    }

    .content-module.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 8. 响应式适配 - 小屏优化 */
    @media (max-width: 375px) {
      .function-item {
        min-width: 50px;
      }
      .function-icon {
        font-size: 20px;
      }
      .meal-img {
        height: 140px;
      }
      .content {
        padding: 0 14px 70px;
      }
    }
  </style>
</head>

<body>
  {% block mainbody %}
  
  {% endblock %}
</body>

</html>